<template>
  <div class="template-form-Lu">
    <a-modal
      title="审评专家评价"
      :visible="huHandleModalVisible"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="100%"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName="dailyEvaluation-huhandleModal-Lu"
      @cancel="closeVisible">
      <template slot="footer">
      </template>
      <!-- 打印的div里的样式不能包在打印的div父级样式里，否则不生效 -->
      <div id="printTest" class="print-div-heng" v-if="huHandleModalVisible">
        <h1 class="dailyEvaluation-title">审评专家评价</h1>
        <table border="1" cellspacing="0" class="dailyEvaluation-hu-table-Lu psgzsh-table" :key="tableKey" style="text-align: center;">
          <tr>
            <th colspan="1">事项名称</th>
            <td colspan="3">{{ tableData.fsxmc }}</td>
            <th style="width: 170px !important">受理编号</th>
            <td colspan="3">{{ tableData.fslbh }}</td>
          </tr>
          <tr>
            <th colspan="1">企业名称</th>
            <td colspan="3">{{ tableData.fqymc }}</td>
            <th style="width: 170px !important">审评范围</th>
            <td colspan="3">{{ tableData.fcyjcfw }}</td>
          </tr>
          <tr>
            <th colspan="1">审评类型</th>
            <td colspan="3">{{ tableData.fjclx }}</td>
            <th style="width: 170px !important">技术审评时间</th>
            <td colspan="3">{{ tableData.fcykssj }} - {{ tableData.fcyjssj }}</td>
          </tr>
          <tr class="itemList-tr">
            <!-- <th>评价人</th> -->
            <th>审评组成员</th>
            <th>廉洁自律情况</th>
            <th>严格按方案进行技术审评</th>
            <th>能发现所负责的职责范围内存在的缺陷情况</th>
            <th style="width: 170px !important">技术审评报告涵盖全部发现问题，缺陷描述清晰、 具体，按风险评定原则对缺陷分级且科学合理</th>
            <th>技术审评作业（或笔录）清晰、可追审评过程，能与审评报告中发现的问题和现场情况相对应</th>
            <th>综合评价</th>
            <th>备注</th>
          </tr>
          <!-- 互评 -->
          <tr v-for="(item,index) in huItemList" :key="index" class="itemList-tr">
            <!-- <td v-if="index == 0" :rowspan="huItemList.length">
              aaa
            </td> -->
            <td>
              {{ item.fbpjrxm }}({{ item.fbpjrzg }})
            </td>
            <td>
              <a-radio-group
                :name="item.fjcyxm"
                :value="item.fljzlqk ? item.fljzlqk : ''"
                @change="checkHuChange($event.target.value, 'fljzlqk', item)"
                :options="checkArray"
              />
            </td>
            <td>
              <a-radio-group
                :value="item.fzdjcqd ? item.fzdjcqd : ''"
                @change="checkHuChange($event.target.value, 'fzdjcqd', item)"
                :options="checkArray"
              />
            </td>
            <td>
              <a-radio-group
                :value="item.fhdqxqk ? item.fhdqxqk : ''"
                @change="checkHuChange($event.target.value, 'fhdqxqk', item)"
                :options="checkArray"
              />
            </td>
            <td>
              <a-radio-group
                :value="item.fxcjcqxfj ? item.fxcjcqxfj : ''"
                @change="checkHuChange($event.target.value, 'fxcjcqxfj', item)"
                :options="checkArray"
              />
            </td>
            <td>
              <a-radio-group
                :value="item.fxcjczy ? item.fxcjczy : ''"
                @change="checkHuChange($event.target.value, 'fxcjczy', item)"
                :options="checkArray"
              />
            </td>
            <td>
              <a-radio-group
                :value="item.fzhpj ? item.fzhpj : ''"
                @change="checkHuChange($event.target.value, 'fzhpj', item)"
                :options="checkArray"
              />
            </td>
            <td>
              <a-textarea
                :value="item.fbz ? item.fbz : ''"
                placeholder="请输入备注:"
                @input="inputHuChange($event.target.value, 'fbz', item)"
                :auto-size="{ minRows: 3}"/>
            </td>
          </tr>
        </table>
        <!-- <div style="display: flex;justify-content: space-around;font-size: 16px;margin: 10px;">
          <span>评价人：{{ tableData.frckpdshblr }}</span>
          <span>复核人：{{ tableData.frckpdfhblr }}</span>
        </div> -->
        <div style="display: flex;padding-left: 10px;">
          <div>填表说明：</div>
          <div>
            1.本表由中心各科人员在每次审评后对审评组成员进行考评。<br/>
            2.综合评价判定原则为：档次占比超过50%的，本次综合评价按该档次进行评定。
          </div>
        </div>
      </div>
      <template slot="footer">
        <!-- <a-button @click="saveTable('保存')">
            保存
        </a-button> -->
        <a-button :loading="loading" class="blue-btn" @click="saveTable('提交')">
            提交
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import { queryJobByJobId,queryXpHcy,updateJcyhpPj,queryPjrJcyHpjlList,saveFlow,submitFlow } from './service/index'
export default {
  data() {
    return {
      huHandleModalVisible: false,
      tableKey: '',
      hjmc: '',
      tableData: {},
      itemManList : [],
      checkArray: [
        { label: "优秀", value: "优秀" },
        { label: "合格", value: "合格" },
        { label: "不合格", value: "不合格" },
      ],
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      isView: false,
      isHuView: false,
      huViewItemList: [],
      huItemList: [],
      loading: false,
      TimeId: -1,
      jobId: '',
    }
  },
  methods: {
    getData(val){
      //console.log(val)
      if(val.fhjmc == '检查员互评'){
        this.isHuView = false
        this.isView = true
        this.getHuData(val.sqsxid)
      }
      if(val.jobid){
        this.jobId = val.jobid
        // 查询当前流程任务详情-通过当前流程任务id
        queryJobByJobId({jobid: val.jobid}).then(res => {
          //console.log(res)
          this.hjmc = res.result.job.fhjmc
          this.tableData = res.result.sqsx
        })
      }
    },
    // 互评
    getHuData(ids){
      queryPjrJcyHpjlList({sqsxid:ids}).then(res => {
          //console.log(res)
          this.huItemList = []
          this.huItemList = res.result
          //console.log(' this.huItemList', this.huItemList)
        })
    },
    // 互评请求回显
    async refreshHuCheck() {
      const res = await queryPjrJcyHpjlList({sqsxid:this.tableData.id});
      if (res.success) {
        this.huItemList = []
        this.huItemList = res.result
      } else {
        this.$message.warning(res.message)
      }
    },
    async checkHuChange(value, prototype, row){
      const cyxp = this.huItemList;
      const target = cyxp.find((c) => c.id == row.id);
      if (target) {
        target[prototype] = value;
      }
      this.huItemList = cyxp;

      const obj = {};
      obj[prototype] = value;
      obj["id"] = row.id;
      //console.log(this.huItemList)
      //console.log(obj)
      const res = await updateJcyhpPj(obj);
      if (res.success) {
        // this.$message.success(res.message)
        this.refreshHuCheck();
      }
    },
    inputHuChange(value, prototype, row){
      clearTimeout(this.TimeId)
      this.TimeId = setTimeout(async () => {
          // 定时器生效时执行的方法
          const cyxp = this.huItemList;
          const target = cyxp.find((c) => c.id == row.id);
          if (target) {
            target[prototype] = value;
          }
          this.huItemList = cyxp;

          const obj = {};
          obj[prototype] = value;
          obj["id"] = row.id;
          //console.log(this.huItemList)
          //console.log(obj)
          const res = await updateJcyhpPj(obj);
          if (res.success) {
            this.$message.success(res.message)
            this.refreshHuCheck();
          }
        }, 2000)
    },
    closeVisible(){
      this.huHandleModalVisible = false
      this.$emit('success')
    },
    saveTable(str){
            //console.log(this.jobId)
      let data = {
        jobid: this.jobId,
      }
      if(str == '保存'){
        saveFlow().then(res => {})
      }
      if(str == '提交'){
        var that = this
        that.$confirm({
          title: '您确定要提交吗?',
          content: '',
          okText: '确定',
          okType: 'info',
          cancelText: '取消',
          onOk() {
            //console.log(data)
            submitFlow(data).then(res => {
              if(res.success){
                that.$message.success(res.message)
                that.closeVisible()
              } else {
                that.$message.warning(res.message)
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      }
    }
  },
}
</script>
<style lang="less">
.dailyEvaluation-huhandleModal-Lu {
    /*在CSS中定义打印样式*/
  @media print {
    body {
      font-size: 16px;  /*设置字体大小*/
    }
    th {
      min-width: 130px;
      text-align: center;
    }
    td {
      text-align: center;
    }
  }
    span {
        word-wrap:break-word;
        word-break:break-all;
        // white-space:normal;
    }
    p {
        word-wrap:break-word;
        word-break:break-all;
        white-space:normal;
    }
  .ant-modal {
    background-color: #5ca3e5;
    position: static;
    width: 100%;
    height: 100%;
    top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 auto !important;
  }
  .ant-modal-body {
    height: calc(100vh - 108px);
    overflow: scroll;
  }
  .ant-modal-content {
    height: 100%;
  }
  .ant-modal-footer {
    text-align: center !important;
    .ant-btn-primary {
      background-color: #5ca3e5 !important;
      border-color: #5ca3e5 !important;
    }
  }
  .ant-form-item {
    margin-bottom: 0px;
    textarea.ant-input {
        margin-bottom: 0px;
        height: 46px;
    }
  }
  .ant-tabs.ant-tabs-card {
    .ant-tabs-tab {
      font-size: 16px;
    }
    .ant-tabs-bar .ant-tabs-tab-active {
        background: #5ca3e5 !important;
        border-color: #5ca3e5 !important;
        color: #fff;
        font-size: 16px;
    }
    .ant-tabs-top-content{
      /* height: 83vh; */
      height: calc(100vh - 157px);
      overflow: scroll;
    }
  }
  //-----------
  .print-div-heng {
    width: 1123px;
    // height: 794px;
    margin: 0 auto;
    .title {
      text-align: center;
    }
  }

  .psgzsh-table {
    th {
      min-width: 130px;
    }
  }
}
.dailyEvaluation-title {
  text-align: center;
}
.dailyEvaluation-hu-table-Lu{
    width: 100%;
    margin: 0 auto;
    margin-top: 4mm;
    font-size: 16px;
    th {
      text-align: center;
      font-size: 16px;
      line-height: 2.5;
      padding: 0px;
    }
    td {
      min-width: 150px;
      text-align: center;
      line-height: 2.5;
      color: black;
      padding: 0px;
      font-size: 16px;
      // font-weight: 600;
      font-family: 'SimSun';
      word-wrap:break-word;
      word-break:break-all;
      white-space:normal;
    }
    .ant-input {
      font-weight: 600;
      // height: 63px;
      max-height: none;
    }
  //   .ant-input:placeholder-shown {
  //     height: 63px;
  //     max-height: none;
  //   }
      form .ant-mentions, form textarea.ant-input {
          margin-bottom: 0px;
          height: 46px;
      }
      // form textarea.ant-input {
      //     margin-bottom: 0px;
      // }
    .ant-input-group.ant-input-group-compact .ant-input {
      // height: 63px;
      max-height: none;
    }
    .ant-upload-list {
      display: none;
    }
    p {
      margin-left: 10px;
      margin-right: 10px;
    }
    .itemList-tr {
      th {
        line-height: 1.2;
        padding: 5px;
      }
      td {
        .ant-radio-group {
          text-align: left;
          .ant-radio-wrapper {
            // display: block;
            padding-left: 30px;
          }
        }
      }
      td:first-child {
        text-align: center;
        padding: 0%;
      }

    }
  }
</style>
